<!--
/**
* Author: KSJ
* Date: 2022-07-29 10:22
* Desc: 影院场次
*/
-->
<template>
  <view class="movie-time" @click.native="clickCell">
    <view class="flex flex-m">
      <view class="movie-time-content">
        <view class="flex">
          <view class="w150 flex-col flex-b">
            <view class="fb fs32 mb5">{{ info.sTime }}</view>
            <view class="fs24 fc8">{{ info.eTime }}散场</view>
          </view>
          <view
            class="flex-col flex-b"
            :class="showPrice ? 'w210 col-center' : 'w0 flex-1'"
          >
            <view class="ell fs24 fc8 mt5 mb5"
              >{{ info.hallName }}{{ info.hallType }}</view
            >
            <view class="fs24 fc8"
              >{{ info.copyLanguage }}{{ info.copyType }}</view
            >
          </view>
          <view class="flex-col flex-b" v-if="showPrice">
            <view class="flex flex-m fc8 fs24 mb5" @click.stop="showPanel"
              >电商价
              <u-icon color="#888" size="13" name="question-circle"></u-icon
            ></view>
            <price
              :price="info.salePrice"
              unit-size="24"
              price-size="32"
              custom-class="fb"
              color="#FFB415"
            ></price>
          </view>
        </view>
        <!-- <view class="flex flex-m">
        <view class="fs24 fc8 col-center flex-1"
          >{{ info.copyLanguage }}{{ info.copyType }}</view
        >
        <view v-if="info.hasCommercePrice"
          ><price
            :price="info.salePrice"
            unit-size="24"
            price-size="32"
            custom-class="fb"
            color="#FFB415"
          ></price
        ></view>
      </view> -->
      </view>
      <view class="movie-right">
        <view class="flex flex-c-m com-btn fs24" v-if="info.otherPrice"
          >比价
          <view :class="{ 'movie_arrow-down': checked }"
            ><u-icon name="arrow-down" size="10" color="#3BC5D2"></u-icon
          ></view>
        </view>

        <view
          v-else
          @click="handleClick"
          class="fs26 flex flex-c-m bc-primary btn"
          >购买</view
        >
      </view>
    </view>
    <view class="mt20 tip-main">
      <tip-type :tagList="info.tagList"></tip-type>
    </view>
  </view>
</template>

<script>
  import Price from '@/components/Price'
  import TipType from '@/components/TipType'
  export default {
    name: '',
    components: {
      Price,
      TipType
    },
    props: {
      info: {
        type: Object
      },

      checked: {
        type: Boolean
      }
    },
    data() {
      return {}
    },
    computed: {
      showPrice() {
        return (
          this.info.hasCommercePrice &&
          this.$auth.getLocBaseSet().showYingYangPrice === '1'
        )
      }
    },
    methods: {
      clickCell() {
        this.$emit('clickCell', this.info)
      },
      showPanel() {
        this.$emit('clickTip', this.info)
      },
      handleClick() {
        this.$emit('clickBuy')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .movie-time {
    background: #fff;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    &-content {
      flex: 1;
      margin-right: 150rpx;
    }
    .col-center {
      margin-right: 50rpx;
    }
    .w0 {
      width: 0rpx;
    }
  }
  .movie-left {
    width: calc(60% - 16rpx);
  }
  .movie-right {
    position: absolute;
    right: 0;
    top: 18rpx;
    margin-right: 16rpx;
  }
  .movie_arrow-down {
    transform: rotate(180deg);
  }
  .com-btn {
    width: 84rpx;
    height: 42rpx;
    border: solid 1rpx $mainColor;
    // border-top: none;
    color: $mainColor;
    border-radius: 6rpx;
    background: rgba($color: $mainColor, $alpha: 0.2);
  }
  .btn {
    width: 110rpx;
    height: 56rpx;
    color: #fff;
    border-radius: 20rpx;
  }
  // .tip-main {
  //   width: 670rpx;
  // }
</style>
